import * as echarts from 'echarts';
import { ref } from 'vue';

export const useInitPieChart = (parkInfo) => {
  const pieChart = ref();
  const initPieChart = () => {
    const { parkIndustry } = parkInfo.value;
    let myChart = echarts.init(pieChart.value);
    const pieOption = {
      color: [
        '#00B2FF', '#2CF2FF', '#892CFF', '#FF624D', '#FFCF54', '#86ECA2'
      ],
      legend: {
        itemGap: 20,
        bottom: '0',
        icon: 'rect',
        itemHeight: 10,
        itemWidth: 10,
        textStyle: {
          color: '#c6d1db'
        }
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '园区产业分析',
          type: 'pie',
          radius: ['55%', '60%'],
          center: ['50%', '40%'],
          tooltip: {
            trigger: 'item',
            formatter: (params) => {
              return `${params.seriesName}</br><div style='display:flex;justify-content: space-between;'><div>${params.marker}${params.name}</div><div>${params.percent}%</div></div>`;
            }
          },
          label: {
            show: false,
            position: 'center'
          },
          data: parkIndustry
        },
      ]
    };
    myChart.setOption(pieOption);
  };

  return { pieChart, initPieChart };
};
